<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>成功预约</title>
    <link rel="stylesheet" href="./css/success.min.css">
    <link rel="icon" href="../广州花卉国际艺术预约系统/img/01首页.jpg" type="image/x-icon">

</head>

<body>
    <div class="container">
        <a href="./index.html"><button id="btn1">返回主页</button></a>
        <!-- 渲染区域 -->
        <div class="mainBox">
            <div class="name" style="width: 55px; border-bottom: 1px solid green;">
                <p class="plan" style="color: red;font-size: 18px;"></p>
            </div>

            <div class="main">
                <div class="topTitle">
                    <p class="huahui"></p>
                    <!-- 欢迎您在9月28日10:00参观2019广州国际花蕊艺术展暨中国插花花艺展。 -->

                </div>
                <div class="imgTitle">
                    <div class="imgBox">
                        <img src="" alt="" height="100%" width="100%" class="img">
                    </div>
                    <button id="btn" style="outline: none;border: none;">保存图片</button>
                </div>
                <div class="botTitle">
                    <p>请保存此页面，进入参观区域前向工作人员出示，谢谢！</p>
                </div>
            </div>
        </div>
    </div>
    <script>
        let huahui = document.querySelector(".huahui");
        let _value = localStorage.getItem("value");
        let newStr = localStorage.getItem("newStr=");
        if (newStr == "09:00") {
            newStr = "上午" + newStr
        } else if (newStr == "12:00") {
            newStr = "中午" + newStr
        } else if (newStr == "14:30") {
            newStr = "下午" + newStr
        }
        huahui.innerHTML = `欢迎您在${_value}号${newStr}前来参观广州国际花蕊艺术展暨中国插花花艺展。`
        let ImgBox = document.querySelector("img");
        let _id = localStorage.getItem("_id");
        let _name = localStorage.getItem("_name");
        let plan = document.querySelector(".plan");
        plan.innerHTML = _name + "：";
        let token = localStorage.getItem('token');
        let btn = document.querySelector("#btn");
        let url = `http://newshopapi.0melon0.cn/api/f_user/Qrcode?token=${token}&id=${_id}`;
        //GET请求
        fetch(url, {
            method: "GET", //type请求类型；
            headers: { //设置请求头，表单编码格式传输数据(参数)
                "Content-Type": "application/x-www-form-urlencoded"
            }
        }).then(function(response) {
            return response.json(); //转json格式返回值
        }).then(function(data) {
            console.log(data.data.data);
            ImgBox.src = data.data.data;
            btn.addEventListener("click", () => {
                downloadIamge('.img')

            })
        }).catch(function(error) {
            console.log(error); //获取请求失败的结果
        })

        function downloadIamge(selector, name) {
            var img = document.querySelector(selector);
            var url = img.src;
            var a = document.createElement("a");
            var event = new MouseEvent("click");
            a.download = name || "下载图片名称";
            a.href = url;
            a.dispatchEvent(event)
        };
    </script>
</body>

</html>